ARIA: columnheader Rolle

Der columnheader-Wert des ARIA-Rollenattributs identifiziert ein Element als eine Zelle in einer Zeile, die Header-Informationen für eine Spalte enthält, ähnlich dem nativen <th>-Element mit Spaltenbereich.

Beschreibung

Ein Element mit role="columnheader", das als Nachfahre eines Elements mit role="row" verschachtelt ist, ist eine statische tabellarische Struktur einer Spaltenkopfzelle in einem tabellarischen Container, sei es eine Tabelle oder ein Raster oder ein anderes Diagramm, das Datenbeziehungen zeigen muss. Damit es unterstützt wird, muss der columnheader in einem Element mit der Rolle des row verschachtelt sein.

Zugehörige WAI-ARIA Rollen, Zustände und Eigenschaften

Alle Spaltenheader sollten innerhalb einer Zeile verschachtelt sein. Jede Zeile sollte wiederum innerhalb eines Rasters, einer Tabelle oder eines Baumrasters verschachtelt sein, alternativ innerhalb einer Zeilengruppe, die in einem der oben genannten verschachtelt ist.

aria-sort: Wird nur auf einen Spaltenheader gleichzeitig angewendet, falls vorhanden, gibt das aria-sort-Attribut an, ob eine Spalte in den drei Werten ascending oder descending geordnet ist oder none für nicht sortiert.

Tastaturinteraktionen

Diese Rolle unterstützt keine spezifische Tastaturinteraktion.

Erforderliche JavaScript-Funktionen

JavaScript ist nur erforderlich, wenn das aria-sort-Attribut verwendet wird.

Beispiele

html

<table>
  <thead>
    <tr role="row">
      <th role="columnheader" scope="col">
        <button>First Name</button>
      </th>
      <th role="columnheader" scope="col">
        <button>Last Name</button>
      </th>
      <th role="columnheader" scope="col" aria-sort="ascending">
        <button>Company Name</button>
      </th>
      <th role="columnheader" scope="col">
        <button>Job Title</button>
      </th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>

Best Practices

Spaltenheader sollten einen Titel oder Header-Informationen für die Spalte enthalten.

Die erste Regel von ARIA ist: Wenn ein nativer HTML-Tag oder ein Attribut die gewünschte Semantik und das Verhalten hat, verwenden Sie es anstelle eines umgewidmeten Elements, dem Sie eine ARIA-Rolle, einen Status oder eine Eigenschaft hinzufügen, um es zugänglich zu machen. Es wird empfohlen, das native HTML-Element <th> mit dem gesetzten scope-Attribut <th scope="col"> anstelle eines <div> oder eines anderen Elements zu verwenden. Wenn Sie das semantische HTML <th scope="col"> verwenden, ist das Rollenattribut nicht erforderlich, kann aber als Sicherung aufgenommen werden, um sicherzustellen, dass die Tabelle ihre Semantik behält, sollten die Standardeinstellungen durch einen CSS-Display-Wert entfernt werden.

Das aria-sort-Attribut kann einem <th scope="col"> hinzugefügt werden, auch wenn das ARIA-Rollenattribut nicht angegeben ist.

Bevorzugen Sie HTML

Columnheader hat die gleiche Semantik wie <th scope="col">.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # columnheader
Unknown specification